import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaColorPicker, WeaTab, WeaLeftRightLayout, WeaTableEditable, WeaRightMenu, WeaDialog, WeaTools, WeaErrorPage, WeaLocaleProvider,WeaInput } from 'ecCom';
import { Popover, Button, Checkbox, Input,message,Modal } from 'antd';
import './follow.less';
import FollowTypeSetting from "./FollowTypeSetting"
const confirm = Modal.confirm;
const getLabel = WeaLocaleProvider.getLabel;

@observer
class TagTypeSelect extends React.Component {
    constructor(props) {
        super(props);   
        this.state = {
            tagData:null,
            addInputShow: false,
            visible: false,
            hoverOut: true,
            inputValue:''
        }
    }
    componentWillReceiveProps(nextProps) {
        const {data} = this.props
        if(this.state.visible==false&&nextProps.visible==true){
            this.setState({addInputShow:false})
        }
        this.setState({ visible: nextProps.visible })
    }

    componentDidMount() {
        const{followTypeSettingStore,FollowRequestid}=this.props;
        followTypeSettingStore.getWorkflowAttentionTypeSet(FollowRequestid);
        
    }
    //   componentDidUpdate(){
    //     const { hover } = this.props.attentionStore;
    //     this.timerID=setTimeout(()=>{ hover() },1000)
    //   }
    componentWillUpdate(nextProps){
        const{FollowRequestid,followTypeSettingStore}=nextProps;
        if(this.props.FollowRequestid==""&&FollowRequestid)
        followTypeSettingStore.getWorkflowAttentionTypeSet(FollowRequestid);
    }
    openSettingDialog=()=>{
        const {followTypeSettingStore,onVisibleChange} = this.props
        const {setFunc,getAttentionTypeSet} = followTypeSettingStore
        setFunc("showDialog",true)
        setFunc("openType","bdsz")
        this.setState({visible:false})
        onVisibleChange(false)
        // getAttentionTypeSet('refresh')
    }
    onChange = (id, e) => {
        const {followTypeSettingStore} = this.props
        const {tagList} = followTypeSettingStore;
        let newdata = tagList.get("datas")||[];
        newdata.map((val) => {
            if (val.id == id) {
                val.checked = e.target.checked
            }
        })
        tagList.set("datas",newdata);
    }
    addInputShow = () => {
        this.setState({ addInputShow: true })
    }
    onVisibleChange = (data) => {
        // if (data == false) {
        //     this.setState({ addInputShow: false, visible: false })
        //     this.props.onVisibleChange(false)
        // }
    }
    cancelAll = () => {
        const {followTypeSettingStore} = this.props
        const {tagList} = followTypeSettingStore;
        let newdata = tagList.get("datas")||[];
        newdata.map((val) => {
            val.checked = false
        })
        this.setState({ tagData: newdata })
        this.submit()
    }
    DocancelAll = () =>{
        let _this=this;
        confirm({
            title: getLabel('131329','信息确认'),
            content: getLabel('511455','确定要清除该流程的所有关注类型吗？'),
            okText: getLabel(826,'确定'),
            onOk() {
                _this.cancelAll();
            },
            onCancel() {},
          });   
      }
    same = () =>{
        const{tagList}=this.props.followTypeSettingStore;
        const arr =tagList.get("datas").map((val,index)=>{
            if(val.showname==String(this.state.inputValue).trim()){
                return false
            }else{
                return true
            }
        })
        return arr.indexOf(false) 
    }
    addSure = () => {
        const{addBtn}=this.props;
        const{tagList}=this.props.followTypeSettingStore;
        if (String(this.state.inputValue).trim() == ""||this.same()!=-1) {
            String(this.state.inputValue).trim() == "" ? message.warning(getLabel('511461','关注类型名称不能为空')) : message.warning(getLabel('511462','该关注类型已存在'));
            return
        }
        this.setState({ inputValue: '', hoverOut: true })
        addBtn(this.state.inputValue)
    }
    handle = (value) => {
        this.setState({ inputValue: value })
    }
    getFontColor=(value) =>{
        let red = parseInt(value.substring(1,3),16)
        let green = parseInt(value.substring(3,5),16)
        let blue = parseInt(value.substring(5,7),16)
        let res = red*0.299 + green*0.587 + blue*0.114
        if (res>186){
            return "#000000"
        }else{
            return "#ffffff"
        }
    }
    submit=()=>{
        const {makeSureCallBack}=this.props;
        const { tagList, saveAttention ,setState}=this.props.followTypeSettingStore;
        let reqid = this.props.FollowRequestid
        let newdata = tagList.get("datas")||[];
        let ids = ''
        newdata.map((val) => {
            if(val.checked==='true'||val.checked===true){
                ids+=val.id+","
            }
        })
        saveAttention({src:'add',requestids:reqid,ids},'formrefresh',makeSureCallBack)
    }
    getList = () => {
        const { tagList } = this.props.followTypeSettingStore;
        let items = []
        let list = tagList.get("datas") || [];
        if(list.length<=0)return "";
        list.map((val) => {
            items.push(
                <div>
                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@dr0p8f@${val.id}`} className="tags_checkbox" checked={val.checked=='false'?false:val.checked==false?false:true }
                        onChange={this.onChange.bind(this, val.id)}
                    >
                        <div className="tags_showColor"
                         title={ val.showname}
                         style={{ background: val.colorval,color:this.getFontColor(val.colorval)  }}>{val.showname}</div>
                    </Checkbox></div>)

        })
        let content =
            <div>
                <div className="select_content">{items}</div>
                <div className="select_btn">
                    <div className="tag_add_div">
                        {this.state.addInputShow ? <div><WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@uz2pqz`}
                                inputType={"multilang"}
                                isBase64={true}
                                style={{
                                    width: '64%', 
                                    margin: '5px',
                                    display:"inline-block"
                                  }} size="large" value={this.state.inputValue} onChange={this.handle} />
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3gowou`} type="primary" onClick={() => { this.addSure() }}>{getLabel('611','添加')}</Button></div> : 
                            <div className="tag_add" onClick={this.addInputShow} title={getLabel('511445','添加关注类型')}><i className="icon-coms-Add-to-o" /></div>}
                    </div>
                    <div className="select_bottom_btn">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@we0c5c`} onClick={()=>{this.setState({ addInputShow: false, inputValue: '',hoverOut:true,visible:false });this.DocancelAll()}}>{getLabel('511458','取消关注')}</Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nauje1`} type="primary" onClick={() => { this.setState({ addInputShow: false, inputValue: '',hoverOut:true,visible:false });this.submit()}}>{getLabel('826','确定')}</Button>
                    </div>
                </div>
            </div>

        return content
    }
    render() {
        const {tagList, showDialog}=this.props.followTypeSettingStore
        return (
            <div>
                <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@u5u4o4`} overlayClassName="wf-Flow-setting-popover" placement={this.props.placement||'leftTop'} title={<div><span>{getLabel('511456','选择关注类型')}</span><span style={{float:"right"}} 
                onClick={this.openSettingDialog}><i className="icon-coms-Flow-setting" style={{cursor:'pointer'}} title={getLabel('507530','设置')}></i></span></div>} 
                content={this.getList()} trigger="click" visible={this.state.visible} onVisibleChange={this.onVisibleChange}>
                    <div>{this.props.button || ''}</div>
                </Popover>
                {showDialog && <FollowTypeSetting ecId={`${this && this.props && this.props.ecId || ''}_FollowTypeSetting@g9w9kj`} followTypeSettingStore={this.props.followTypeSettingStore} makeSureCallBack={this.props.makeSureCallBack}/>}
            </div>
        )
    }
}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@jtq8v4`} msg={props.error ? props.error : getLabel(383324, ' 对不起，该页面异常，请联系管理员 ') + '！'} />,
    { error: "" }
)(TagTypeSelect);